<%--
  Created by IntelliJ IDEA.
  User: ss.xju
  Date: 2020-07-19
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>省市级联&lg;jquery3</title>
    <script src="/js/jquery-1.7.1.min.js"></script>
    <script>
        $(function (){
            $("#sel1").on("change",function(){
                console.log($(this).val());
                var url = "http://localhost:8080/city.city?u_id="+$(this).val();
                $.get(url,function (data){
                    //data就是返回的数据
                    var list = JSON.parse(data);
                    console.log(list);
                    $("#sel2").empty();//清空之前的内容
                    for (let i = 0; i <list.length; i++) {
                        $("#sel2").append("<option value="+list[i].id+" >"+list[i].name+"</option>");
                    }
                })
            })
        })
    </script>

</head>
<body>
    <a href="province.jquery">省市级联jQuery3.0</a>

    <select name="sel1" id="sel1">
        <option value="-1">请选择省份</option>
        <c:forEach var="pro" items="${list}">
            <option value="${pro.id}">${pro.name}</option>
        </c:forEach>
    </select>

    <select name="sel2" id="sel2"></select>


</body>
</html>
